<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>红枣收购价格测算系统</title>
    
    <!-- PWA Meta Tags -->
    <meta name="description" content="专业的红枣收购价格计算工具，支持质量价差计算和价格限制">
    <meta name="keywords" content="红枣,收购价格,测算,质量价差,农产品">
    <meta name="author" content="红枣收购价格测算系统">
    
    <!-- PWA Manifest -->
    <link rel="manifest" href="./manifest.json">
    
    <!-- Theme Color -->
    <meta name="theme-color" content="#1e3c72">
    <meta name="msapplication-TileColor" content="#1e3c72">
    <meta name="msapplication-navbutton-color" content="#1e3c72">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    
    <!-- PWA Display -->
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-title" content="红枣测算">
    
    <!-- Icons for different platforms -->
    <link rel="icon" type="image/svg+xml" href="./icons/icon-192x192.svg">
    <link rel="apple-touch-icon" href="./icons/icon-192x192.svg">
    <link rel="apple-touch-icon" sizes="72x72" href="./icons/icon-72x72.svg">
    <link rel="apple-touch-icon" sizes="96x96" href="./icons/icon-96x96.svg">
    <link rel="apple-touch-icon" sizes="128x128" href="./icons/icon-128x128.svg">
    <link rel="apple-touch-icon" sizes="144x144" href="./icons/icon-144x144.svg">
    <link rel="apple-touch-icon" sizes="152x152" href="./icons/icon-152x152.svg">
    <link rel="apple-touch-icon" sizes="192x192" href="./icons/icon-192x192.svg">
    <link rel="apple-touch-icon" sizes="384x384" href="./icons/icon-384x384.svg">
    <link rel="apple-touch-icon" sizes="512x512" href="./icons/icon-512x512.svg">
    
    <!-- Microsoft Tiles -->
    <meta name="msapplication-TileImage" content="./icons/icon-144x144.svg">
    <meta name="msapplication-square70x70logo" content="./icons/icon-72x72.svg">
    <meta name="msapplication-square150x150logo" content="./icons/icon-152x152.svg">
    <meta name="msapplication-square310x310logo" content="./icons/icon-384x384.svg">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Microsoft YaHei', sans-serif;
            background: linear-gradient(135deg, #1e3c72 0%, #2a5298 50%, #4a90e2 100%);
            min-height: 100vh;
            padding: 10px;
        }

        .container {
            max-width: 500px;
            margin: 0 auto;
            background: white;
            border-radius: 20px;
            box-shadow: 0 25px 50px rgba(0,0,0,0.15);
            overflow: hidden;
            animation: slideIn 0.6s ease-out;
        }

        @keyframes slideIn {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .header {
            background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
            color: white;
            text-align: center;
            padding: 25px 20px;
            position: relative;
            overflow: hidden;
        }

        .header::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="2" fill="rgba(255,255,255,0.1)"/></svg>') repeat;
            animation: float 20s linear infinite;
        }

        @keyframes float {
            0% { transform: translate(-50%, -50%) rotate(0deg); }
            100% { transform: translate(-50%, -50%) rotate(360deg); }
        }

        .header h1 {
            font-size: 28px;
            margin-bottom: 8px;
            position: relative;
            z-index: 1;
        }

        .header p {
            opacity: 0.9;
            font-size: 16px;
            position: relative;
            z-index: 1;
        }

        .content {
            padding: 25px;
        }

        .section {
            margin-bottom: 25px;
            padding: 20px;
            border-radius: 15px;
            border: 2px solid transparent;
            transition: all 0.3s ease;
        }

        .section:hover {
            border-color: #4a90e2;
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(74, 144, 226, 0.15);
        }

        .section-title {
            display: flex;
            align-items: center;
            font-size: 18px;
            font-weight: bold;
            color: #1e3c72;
            margin-bottom: 15px;
            padding-bottom: 8px;
            border-bottom: 2px solid #f0f0f0;
        }

        .section-title .icon {
            font-size: 24px;
            margin-right: 10px;
        }

        .base-price-section {
            background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
        }

        .standard-section {
            background: linear-gradient(135deg, #f3e5f5 0%, #e1bee7 100%);
        }

        .actual-section {
            background: linear-gradient(135deg, #e8f5e8 0%, #c8e6c9 100%);
        }

        .form-group {
            margin-bottom: 18px;
        }

        .form-group label {
            display: block;
            margin-bottom: 8px;
            font-weight: 600;
            color: #333;
            font-size: 14px;
        }

        .form-group input {
            width: 100%;
            padding: 12px 15px;
            border: 2px solid #e9ecef;
            border-radius: 10px;
            font-size: 16px;
            transition: all 0.3s ease;
            background: white;
        }

        .form-group input:focus {
            outline: none;
            border-color: #4a90e2;
            box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.1);
            transform: translateY(-1px);
        }

        .input-group {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 15px;
        }

        .btn {
            width: 100%;
            padding: 15px;
            background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
            color: white;
            border: none;
            border-radius: 12px;
            font-size: 18px;
            font-weight: bold;
            cursor: pointer;
            transition: all 0.3s ease;
            margin: 20px 0;
            position: relative;
            overflow: hidden;
        }

        .btn::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
            transition: left 0.5s;
        }

        .btn:hover::before {
            left: 100%;
        }

        .btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 10px 25px rgba(30, 60, 114, 0.3);
        }

        .btn:active {
            transform: translateY(-1px);
        }

        .result {
            background: linear-gradient(135deg, #FFF 0%, #F8F9FA 100%);
            border-radius: 15px;
            padding: 20px;
            margin-top: 20px;
            border: 2px solid #4a90e2;
            box-shadow: 0 8px 25px rgba(74, 144, 226, 0.1);
            animation: resultSlideIn 0.5s ease-out;
        }

        @keyframes resultSlideIn {
            from {
                opacity: 0;
                transform: translateY(20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .result h3 {
            color: #1e3c72;
            margin-bottom: 15px;
            text-align: center;
            font-size: 20px;
        }

        .result-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 12px;
            padding: 8px 0;
            font-size: 15px;
        }

        .result-item:last-child {
            margin-bottom: 0;
        }

        .result-item.highlight {
            background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
            color: white;
            padding: 15px;
            border-radius: 10px;
            font-size: 18px;
            font-weight: bold;
            margin: 15px 0;
        }

        .price-diff-section {
            background: #F8F9FA;
            padding: 15px;
            border-radius: 10px;
            margin: 15px 0;
            border-left: 4px solid #4a90e2;
        }

        .price-diff-title {
            font-weight: bold;
            color: #1e3c72;
            margin-bottom: 10px;
            font-size: 16px;
        }

        .diff-item {
            display: flex;
            justify-content: space-between;
            margin-bottom: 8px;
            padding: 5px 0;
            font-size: 14px;
        }

        .diff-item:last-child {
            border-top: 1px solid #dee2e6;
            padding-top: 10px;
            font-weight: bold;
        }

        .positive {
            color: #28a745;
        }

        .negative {
            color: #dc3545;
        }

        .warning {
            background: #fff3cd;
            border: 1px solid #ffeaa7;
            color: #856404;
            padding: 12px;
            border-radius: 8px;
            margin-top: 15px;
            font-size: 13px;
            display: flex;
            align-items: center;
        }

        .warning::before {
            content: '⚠️';
            margin-right: 8px;
            font-size: 16px;
        }

        .info-box {
            background: #e8f4fd;
            border: 1px solid #bee5eb;
            color: #0c5460;
            padding: 15px;
            border-radius: 10px;
            margin-bottom: 20px;
            font-size: 14px;
            line-height: 1.5;
        }

        .info-box h4 {
            margin-bottom: 8px;
            color: #1e3c72;
        }

        .info-box ul {
            margin-left: 20px;
        }

        .info-box li {
            margin-bottom: 5px;
        }

        @media (max-width: 480px) {
            .container {
                margin: 5px;
                border-radius: 15px;
            }
            
            .header h1 {
                font-size: 24px;
            }
            
            .content {
                padding: 20px;
            }

            .input-group {
                grid-template-columns: 1fr;
            }

            .section {
                padding: 15px;
            }
        }

        .footer {
            text-align: center;
            padding: 20px;
            color: #666;
            font-size: 12px;
            border-top: 1px solid #eee;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>🌰 红枣收购价格测算系统</h1>
            <p>专业的红枣收购价格计算工具</p>
        </div>
        
        <div class="content">
            <!-- 计算说明 -->
            <div class="info-box">
                <h4>📋 计算说明</h4>
                <ul>
                    <li><strong>指导价格 = 基准价格 + 质量价差</strong></li>
                    <li>大小区间：以75%为标准，每高/低1%对应±0.1元/公斤</li>
                    <li>不合格果率：以10%为标准，每高1%降0.1元，每低1%加0.1元</li>
                    <li>水分：以28%为标准，不得超标，每低1%加0.1元</li>
                    <li>质量价差限制：加价≤0.3元/公斤，降价≤0.5元/公斤</li>
                </ul>
            </div>

            <!-- 基准价格设置 -->
            <div class="section base-price-section">
                <div class="section-title">
                    <span class="icon">💰</span>
                    基准价格设置
                </div>
                <div class="form-group">
                    <label>基准价格 (元/公斤)</label>
                    <input type="number" id="basePrice" placeholder="请输入基准价格" step="0.01" oninput="calculatePrice()">
                </div>
            </div>

            <!-- 质量标准设置 -->
            <div class="section standard-section">
                <div class="section-title">
                    <span class="icon">📏</span>
                    质量标准设置
                </div>
                <div class="input-group">
                    <div class="form-group">
                        <label>大小区间标准 (%)</label>
                        <input type="number" id="sizeStandard" placeholder="三级以上比例" step="0.1" value="75" oninput="calculatePrice()">
                    </div>
                    <div class="form-group">
                        <label>不合格果率标准 (%)</label>
                        <input type="number" id="defectStandard" placeholder="不合格果率" step="0.1" value="10" oninput="calculatePrice()">
                    </div>
                </div>
                <div class="form-group">
                    <label>水分标准 (%)</label>
                    <input type="number" id="moistureStandard" placeholder="水分标准" step="0.1" value="28" oninput="calculatePrice()">
                </div>
            </div>

            <!-- 实际质量数据 -->
            <div class="section actual-section">
                <div class="section-title">
                    <span class="icon">📊</span>
                    实际质量数据
                </div>
                <div class="input-group">
                    <div class="form-group">
                        <label>实际大小区间 (%)</label>
                        <input type="number" id="actualSize" placeholder="三级以上比例" step="0.1" oninput="calculatePrice()">
                    </div>
                    <div class="form-group">
                        <label>实际不合格果率 (%)</label>
                        <input type="number" id="actualDefect" placeholder="不合格果率" step="0.1" oninput="calculatePrice()">
                    </div>
                </div>
                <div class="form-group">
                    <label>实际水分 (%)</label>
                    <input type="number" id="actualMoisture" placeholder="实际水分" step="0.1" oninput="calculatePrice()">
                </div>
            </div>

            <button class="btn" onclick="calculatePrice()">🧮 计算收购价格</button>
            
            <div id="result"></div>
        </div>

        <div class="footer">
            红枣收购价格测算系统 © 2024 | 专业农产品收购工具
        </div>
    </div>

    <script>
        function calculatePrice() {
            const basePrice = parseFloat(document.getElementById('basePrice').value);
            const sizeStandard = parseFloat(document.getElementById('sizeStandard').value) || 75;
            const defectStandard = parseFloat(document.getElementById('defectStandard').value) || 10;
            const moistureStandard = parseFloat(document.getElementById('moistureStandard').value) || 28;
            
            const actualSize = parseFloat(document.getElementById('actualSize').value);
            const actualDefect = parseFloat(document.getElementById('actualDefect').value);
            const actualMoisture = parseFloat(document.getElementById('actualMoisture').value);

            // 检查必填项
            const missingFields = [];
            if (!basePrice || isNaN(basePrice)) {
                missingFields.push('基准价格');
            }
            if (isNaN(actualSize)) {
                missingFields.push('实际大小区间');
            }
            if (isNaN(actualDefect)) {
                missingFields.push('实际不合格果率');
            }
            if (isNaN(actualMoisture)) {
                missingFields.push('实际水分');
            }

            // 如果有缺失字段，显示详细提示
            if (missingFields.length > 0) {
                document.getElementById('result').innerHTML = `
                    <div class="result">
                        <h3>⚠️ 请完善以下信息</h3>
                        <div class="warning" style="margin: 15px 0;">
                            请填写以下必填项目：<br>
                            <strong>${missingFields.join('、')}</strong>
                        </div>
                        <div class="info-box">
                            <h4>📝 填写说明</h4>
                            <ul>
                                <li><strong>基准价格</strong>：当前市场的基础收购价格（元/公斤）</li>
                                <li><strong>实际大小区间</strong>：三级以上红枣的比例（%）</li>
                                <li><strong>实际不合格果率</strong>：不合格红枣的比例（%）</li>
                                <li><strong>实际水分</strong>：红枣的实际水分含量（%）</li>
                            </ul>
                        </div>
                    </div>
                `;
                return;
            }

            // 计算各项价格差
            let sizeDiff = 0;
            let defectDiff = 0;
            let moistureDiff = 0;

            // 1. 大小区间价差计算
            const sizeDifference = actualSize - sizeStandard;
            sizeDiff = sizeDifference * 0.1; // 每1%对应0.1元

            // 2. 不合格果率价差计算
            const defectDifference = actualDefect - defectStandard;
            if (defectDifference > 0) {
                // 每高1%降0.1元/公斤
                defectDiff = -defectDifference * 0.1;
            } else {
                // 每低1%加0.1元/公斤
                defectDiff = Math.abs(defectDifference) * 0.1;
            }

            // 3. 水分价差计算
            if (actualMoisture > moistureStandard) {
                // 超出标准严重扣减
                moistureDiff = -(actualMoisture - moistureStandard) * 0.2;
            } else {
                // 每低1%加0.1元/公斤
                moistureDiff = (moistureStandard - actualMoisture) * 0.1;
            }

            // 对每项质量价差分别进行限制（加价≤0.3元，降价≤0.5元）
            const maxIncrease = 0.3;
            const maxDecrease = -0.5;
            
            const originalSizeDiff = sizeDiff;
            const originalDefectDiff = defectDiff;
            const originalMoistureDiff = moistureDiff;
            
            sizeDiff = Math.max(maxDecrease, Math.min(maxIncrease, sizeDiff));
            defectDiff = Math.max(maxDecrease, Math.min(maxIncrease, defectDiff));
            moistureDiff = Math.max(maxDecrease, Math.min(maxIncrease, moistureDiff));

            // 计算限制前后的总质量价差
            const originalTotalQualityDiff = originalSizeDiff + originalDefectDiff + originalMoistureDiff;
            const limitedTotalQualityDiff = sizeDiff + defectDiff + moistureDiff;
            
            const theoreticalPrice = basePrice + originalTotalQualityDiff;
            const finalPrice = basePrice + limitedTotalQualityDiff;

            // 生成结果HTML
            const sizeIsLimited = originalSizeDiff !== sizeDiff;
            const defectIsLimited = originalDefectDiff !== defectDiff;
            const moistureIsLimited = originalMoistureDiff !== moistureDiff;
            const anyLimited = sizeIsLimited || defectIsLimited || moistureIsLimited;
            
            document.getElementById('result').innerHTML = `
                <div class="result">
                    <h3>🌰 红枣收购价格测算结果</h3>
                    
                    <div class="result-item">
                        <span>基准价格:</span>
                        <span><strong>¥${basePrice.toFixed(2)}/公斤</strong></span>
                    </div>
                    
                    <div class="price-diff-section">
                        <div class="price-diff-title">📊 质量价差明细</div>
                        <div class="diff-item">
                            <span>大小区间价差 (${actualSize}% vs ${sizeStandard}%):</span>
                            <span class="${sizeDiff >= 0 ? 'positive' : 'negative'}">
                                ${sizeIsLimited ? 
                                    `${originalSizeDiff >= 0 ? '+' : ''}${originalSizeDiff.toFixed(3)} → ${sizeDiff >= 0 ? '+' : ''}${sizeDiff.toFixed(3)}元/公斤 (已限制)` :
                                    `${sizeDiff >= 0 ? '+' : ''}${sizeDiff.toFixed(3)}元/公斤`
                                }
                            </span>
                        </div>
                        <div class="diff-item">
                            <span>不合格果率价差 (${actualDefect}% vs ${defectStandard}%):</span>
                            <span class="${defectDiff >= 0 ? 'positive' : 'negative'}">
                                ${defectIsLimited ? 
                                    `${originalDefectDiff >= 0 ? '+' : ''}${originalDefectDiff.toFixed(3)} → ${defectDiff >= 0 ? '+' : ''}${defectDiff.toFixed(3)}元/公斤 (已限制)` :
                                    `${defectDiff >= 0 ? '+' : ''}${defectDiff.toFixed(3)}元/公斤`
                                }
                            </span>
                        </div>
                        <div class="diff-item">
                            <span>水分价差 (${actualMoisture}% vs ${moistureStandard}%):</span>
                            <span class="${moistureDiff >= 0 ? 'positive' : 'negative'}">
                                ${moistureIsLimited ? 
                                    `${originalMoistureDiff >= 0 ? '+' : ''}${originalMoistureDiff.toFixed(3)} → ${moistureDiff >= 0 ? '+' : ''}${moistureDiff.toFixed(3)}元/公斤 (已限制)` :
                                    `${moistureDiff >= 0 ? '+' : ''}${moistureDiff.toFixed(3)}元/公斤`
                                }
                            </span>
                        </div>
                        <div class="diff-item">
                            <span>质量价差小计:</span>
                            <span class="${limitedTotalQualityDiff >= 0 ? 'positive' : 'negative'}">
                                ${limitedTotalQualityDiff >= 0 ? '+' : ''}${limitedTotalQualityDiff.toFixed(3)}元/公斤
                            </span>
                        </div>
                    </div>

                    <div class="result-item">
                        <span>理论收购价格:</span>
                        <span>¥${theoreticalPrice.toFixed(2)}/公斤</span>
                    </div>

                    ${anyLimited ? `
                        <div class="result-item">
                            <span>限制后质量价差:</span>
                            <span class="${limitedTotalQualityDiff >= 0 ? 'positive' : 'negative'}">
                                ${limitedTotalQualityDiff >= 0 ? '+' : ''}${limitedTotalQualityDiff.toFixed(3)}元/公斤
                            </span>
                        </div>
                    ` : ''}

                    <div class="result-item highlight">
                        <span>🎯 最终收购价格:</span>
                        <span>¥${finalPrice.toFixed(2)}/公斤</span>
                    </div>

                    ${anyLimited ? `
                        <div class="warning">
                            质量价差已达到限制范围（加价≤0.3元/公斤，降价≤0.5元/公斤）
                        </div>
                    ` : ''}

                    ${actualMoisture > moistureStandard ? `
                        <div class="warning">
                            水分超标！实际水分${actualMoisture}%超过标准${moistureStandard}%，已按超标处理
                        </div>
                    ` : ''}
                </div>
            `;
        }

        // 页面加载时的初始化
        document.addEventListener('DOMContentLoaded', function() {
            // 添加输入验证
            const inputs = document.querySelectorAll('input[type="number"]');
            inputs.forEach(input => {
                input.addEventListener('input', function() {
                    if (this.value < 0) {
                        this.value = 0;
                    }
                });
            });

            // 页面加载时显示使用提示
            document.getElementById('result').innerHTML = `
                <div class="info-box">
                    <h4>🚀 开始使用</h4>
                    <p>请填写基准价格和实际质量数据，然后点击"计算收购价格"按钮进行测算。</p>
                    <p><strong>提示：</strong>质量标准已预设为行业标准值，您可以根据需要调整。</p>
                </div>
            `;
        });

        // 注册 Service Worker
        if ('serviceWorker' in navigator) {
            window.addEventListener('load', () => {
                navigator.serviceWorker.register('./sw.js')
                    .then(registration => {
                        console.log('Service Worker 注册成功:', registration.scope);
                        
                        // 检查是否有新的 Service Worker 等待激活
                        if (registration.waiting) {
                            showUpdateAvailable(registration);
                        }
                        
                        // 监听 Service Worker 更新
                        registration.addEventListener('updatefound', () => {
                            const newWorker = registration.installing;
                            newWorker.addEventListener('statechange', () => {
                                if (newWorker.state === 'installed' && navigator.serviceWorker.controller) {
                                    showUpdateAvailable(registration);
                                }
                            });
                        });
                    })
                    .catch(error => {
                        console.log('Service Worker 注册失败:', error);
                    });
            });
        }

        // 显示更新提示
        function showUpdateAvailable(registration) {
            const updateBanner = document.createElement('div');
            updateBanner.innerHTML = `
                <div style="position: fixed; top: 0; left: 0; right: 0; background: #4a90e2; color: white; padding: 10px; text-align: center; z-index: 9999;">
                    <span>发现新版本！</span>
                    <button onclick="updateApp()" style="margin-left: 10px; padding: 5px 10px; background: white; color: #4a90e2; border: none; border-radius: 4px; cursor: pointer;">立即更新</button>
                    <button onclick="this.parentElement.parentElement.remove()" style="margin-left: 5px; padding: 5px 10px; background: transparent; color: white; border: 1px solid white; border-radius: 4px; cursor: pointer;">稍后</button>
                </div>
            `;
            document.body.appendChild(updateBanner);
            
            window.updateApp = () => {
                if (registration.waiting) {
                    registration.waiting.postMessage({ type: 'SKIP_WAITING' });
                    window.location.reload();
                }
            };
        }

        // PWA 安装提示
        let deferredPrompt;
        window.addEventListener('beforeinstallprompt', (e) => {
            e.preventDefault();
            deferredPrompt = e;
            
            // 显示安装提示
            const installBanner = document.createElement('div');
            installBanner.innerHTML = `
                <div style="position: fixed; bottom: 20px; left: 20px; right: 20px; background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%); color: white; padding: 15px; border-radius: 10px; box-shadow: 0 4px 20px rgba(0,0,0,0.3); z-index: 9999;">
                    <div style="display: flex; align-items: center; justify-content: space-between;">
                        <div>
                            <strong>📱 安装应用</strong><br>
                            <small>将红枣测算工具添加到主屏幕，随时使用！</small>
                        </div>
                        <div>
                            <button onclick="installPWA()" style="padding: 8px 16px; background: white; color: #1e3c72; border: none; border-radius: 6px; cursor: pointer; margin-right: 8px; font-weight: bold;">安装</button>
                            <button onclick="this.parentElement.parentElement.parentElement.remove()" style="padding: 8px 12px; background: transparent; color: white; border: 1px solid white; border-radius: 6px; cursor: pointer;">×</button>
                        </div>
                    </div>
                </div>
            `;
            document.body.appendChild(installBanner);
            
            window.installPWA = async () => {
                if (deferredPrompt) {
                    deferredPrompt.prompt();
                    const { outcome } = await deferredPrompt.userChoice;
                    console.log(`用户选择: ${outcome}`);
                    deferredPrompt = null;
                    installBanner.remove();
                }
            };
        });

        // 监听应用安装成功事件
        window.addEventListener('appinstalled', (evt) => {
            console.log('PWA 安装成功');
            // 可以在这里添加安装成功的提示或统计
        });
    </script>
</body>
</html>